{% extends "personnel/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <script src="../../static/system_setup/js/base.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .top_navigation {
            width: 100px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;color: #0b0b0b;border-bottom: none;text-align: center;cursor: pointer;
        }
        .top_navigation_active {
            border-bottom: #1E90FF solid 1px;color: #1E90FF;
        }
        .dot {
            position: absolute;top: 5px;left: 5px;width: 6px;height: 6px;border-radius: 50%;
        }
        .shade {
            position: fixed;top: 45px;left: 14%;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
        #this_div::-webkit-scrollbar {
          width: 0;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div style="width: 100%;height: 100%;">
        <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;background: white;">
            <div id="MyStatistics" onclick="switch_content(this.id)" class="top_navigation top_navigation_active">
                我的统计
            </div>
            <div id="TeamStatistics" onclick="switch_content(this.id)" class="top_navigation">
                部门统计
            </div>
        </div>

        <div id="MyStatisticsModel" style="width: 100%;height: 95%;overflow: auto;padding-top: 0.5%;">
            <div style="width: 98%;margin-left: 1%;background: white;padding: 20px;">
                <div style="width: 32%;height: 100px;display: inline-block;vertical-align: top;background: linear-gradient(to right, #c9e2b3 , #00a854);margin-left: 0.7%;">
                    <div style="width: 100%;padding-left: 5%;height: 40px;line-height: 40px;font-size: 18px;">
                        <strong>打卡正常</strong>
                    </div>
                    <div style="width: 100%;height: 55px;line-height: 55px;text-align: center;font-size: 24px;">
                        <strong>31 次</strong>
                    </div>
                </div>

                <div style="width: 32%;height: 100px;display: inline-block;vertical-align: top;background: linear-gradient(to right, #EEE8AA , #EEAD0E);margin-left: 0.7%;">
                    <div style="width: 100%;padding-left: 5%;height: 40px;line-height: 40px;font-size: 18px;">
                        <strong>迟到早退</strong>
                    </div>
                    <div style="width: 100%;height: 55px;line-height: 55px;text-align: center;font-size: 24px;">
                        <strong>0 次</strong>
                    </div>
                </div>

                <div style="width: 32%;height: 100px;display: inline-block;vertical-align: top;background: linear-gradient(to right, #FFC1C1 , #CD5555);margin-left: 0.7%;">
                    <div style="width: 100%;padding-left: 5%;height: 40px;line-height: 40px;font-size: 18px;">
                        <strong>未打卡</strong>
                    </div>
                    <div style="width: 100%;height: 55px;line-height: 55px;text-align: center;font-size: 24px;">
                        <strong>0 次</strong>
                    </div>
                </div>
            </div>

            <div style="margin-top: 10px;width: 98%;margin-left: 1%;background: white;height: 55%;">
                <div style="width: 100%;height: 35px;line-height: 35px;background: #F5F5F5;padding-left: 11%;">
                    <div style="width: 13%;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;">周一</div>
                    <div style="width: 13%;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;">周二</div>
                    <div style="width: 13%;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;">周三</div>
                    <div style="width: 13%;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;">周四</div>
                    <div style="width: 13%;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;">周五</div>
                    <div style="width: 13%;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;">周六</div>
                    <div style="width: 13%;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;">周日</div>
                </div>
                <div style="width: 10%;height: 89%;display: inline-block;vertical-align: top;padding-top: 2%;">
                    <div style="width: 100%;text-align: center;height: 35px;line-height: 23px;">
                        <div style="width: 50px;height: 20px;background: #54FF9F;border: #54FF9F solid 1px;display: inline-block;vertical-align: center;margin: 0 auto;"></div>
                        <div style="display: inline-block;vertical-align: top;margin-left: 5px;"> 出勤</div>
                    </div>
                    <div style="width: 100%;text-align: center;height: 35px;line-height: 23px;">
                        <div style="width: 50px;height: 20px;background: #FF8247;border: #FF8247 solid 1px;display: inline-block;vertical-align: center;margin: 0 auto;"></div>
                        <div style="display: inline-block;vertical-align: top;margin-left: 5px;"> 请假</div>
                    </div>
                    <div style="width: 100%;text-align: center;height: 35px;line-height: 23px;">
                        <div style="width: 50px;height: 20px;background: #0db5c8;border: #0db5c8 solid 1px;display: inline-block;vertical-align: center;margin: 0 auto;"></div>
                        <div style="display: inline-block;vertical-align: top;margin-left: 5px;"> 出差</div>
                    </div>
                    <div style="width: 100%;text-align: center;height: 35px;line-height: 23px;">
                        <div style="width: 50px;height: 20px;background: red;border: red solid 1px;display: inline-block;vertical-align: center;margin: 0 auto;"></div>
                        <div style="display: inline-block;vertical-align: top;margin-left: 5px;"> 异常</div>
                    </div>
                </div>
                <div id="CalendarDetails" style="width: 89%;height: 89%;display: inline-block;vertical-align: top;">
                </div>
            </div>

            <div style="margin-top: 10px;width: 98%;margin-left: 1%;height: 25%;">
                <div style="width: 24%;height: 100%;display: inline-block;vertical-align: top;background: white;">
                    <div style="width: 100%;height: 40px;padding-left: 1%;line-height: 40px;font-size: 16px;"><strong>上班打卡</strong><span style="float: right;margin-right: 20px;">{{ SchedulingObj.start_time }}</span></div>
                    <div style="width: 100%;height: 70%;">
                        {% if SchedulingObj.start_time %}
                            {% if morning_check_obj %}
                                {% for morning_check in morning_check_obj %}
                                    <div style="width: 100%;line-height: 40px;padding-left: 3%;">
                                        {{ morning_check.check_time|date:'Y-m-d H:i' }}
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;">
                                    <strong>未打卡</strong>
                                </div>
                            {% endif %}
                        {% else %}
                            <div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;">
                                <strong>未排班</strong>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div style="width: 24%;height: 100%;margin-left: 1%;display: inline-block;vertical-align: top;background: white;">
                    <div style="width: 100%;height: 40px;padding-left: 1%;line-height: 40px;font-size: 16px;"><strong>下班打卡</strong><span style="float: right;margin-right: 20px;">{{ SchedulingObj.end_time }}</span></div>
                    <div style="width: 100%;height: 70%;">
                        {% if SchedulingObj.end_time %}
                            {% if morning_off_work_obj %}
                                {% for off_work in morning_off_work_obj %}
                                    <div style="width: 100%;line-height: 40px;padding-left: 3%;">
                                        {{ off_work.check_time|date:'Y-m-d H:i' }}
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;">
                                    <strong>未打卡</strong>
                                </div>
                            {% endif %}
                        {% else %}
                            <div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;">
                                <strong>未排班</strong>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div style="width: 24%;height: 100%;margin-left: 1%;display: inline-block;vertical-align: top;background: white;">
                    <div style="width: 100%;height: 40px;padding-left: 1%;line-height: 40px;font-size: 16px;"><strong>上班打卡</strong><span style="float: right;margin-right: 20px;">{{ SchedulingObj.start_time1 }}</span></div>
                    <div style="width: 100%;height: 70%;">
                        {% if SchedulingObj.start_time1 %}
                            {% if afternoon_work_end_obj %}
                                {% for afternoon_work_end in afternoon_work_end_obj %}
                                    <div style="width: 100%;line-height: 40px;padding-left: 3%;">
                                        {{ afternoon_work_end.check_time|date:'Y-m-d H:i' }}
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;">
                                    <strong>未打卡</strong>
                                </div>
                            {% endif %}
                        {% else %}
                            <div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;">
                                <strong>未排班</strong>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div style="width: 24%;height: 100%;margin-left: 1%;display: inline-block;vertical-align: top;background: white;">
                    <div style="width: 100%;height: 40px;padding-left: 1%;line-height: 40px;font-size: 16px;"><strong>下班打卡</strong><span style="float: right;margin-right: 20px;">{{ SchedulingObj.end_time1 }}</span></div>
                    <div style="width: 100%;height: 70%;">
                        {% if SchedulingObj.end_time1 %}
                            {% if evening_work_end_obj %}
                                {% for evening_work in evening_work_end_obj %}
                                    <div style="width: 100%;line-height: 40px;padding-left: 3%;">
                                        {{ evening_work.check_time|date:'Y-m-d H:i' }}
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;">
                                    <strong>未打卡</strong>
                                </div>
                            {% endif %}
                        {% else %}
                            <div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;">
                                <strong>未排班</strong>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div id="TeamStatisticsModel" style="width: 100%;height: 95%;overflow: auto;display: none;">
            <div id="my_application" style="width: 100%;height: 100%;overflow: auto;background-color: white;">
                <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
                    <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                        <section class="grid-main" style="height: 100%;">
                            <table id="main_table"></table>
                        </section>
                    </div>
                </div>
            </div>
        </div>

        <div id="check_in_details" class="shade">
            <div id="check-model" style="width: 700px;background: white;left: 50%;top: 50%;position: absolute;transform: translate(-50%, -50%);">
                <div id="check-title" style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;font-size: 14px;cursor: move;">
                    <div style="width: 40%;height: 40px;line-height: 40px;text-align: left;padding-left: 1%;letter-spacing: 2px;float: left;">
                        打卡详情
                    </div>
                    <div style="width: 59%;height: 40px;letter-spacing: 2px;float: left;">
                        <div onclick="check_close_models()" style="width: 40px;height: 40px;text-align: center;line-height: 40px;cursor: pointer;float: right;">
                            <i class="iconfont icon-quchu"></i>
                        </div>
                    </div>
                </div>

                <div style="width: 100%;font-size: 14px;background: #E8E8E8;padding-top: 1%;padding-bottom: 1%;">
                    <div style="width: 24%;height: 300px;margin-left: 1%;background: white;padding-top: 1%;padding-left: 1%;border-radius: 3px;padding-right: 1%;display: inline-block;vertical-align: top;">
                        <div style="width: 100%;padding-left: 1%;height: 40px;">上班打卡</div>
                        <div id="morning_work_start" style="width: 100%;padding-left: 1%;height: 255px;">

                        </div>
                    </div>
                    <div style="width: 24%;height: 300px;background: white;padding-top: 1%;padding-left: 1%;border-radius: 3px;padding-right: 1%;display: inline-block;vertical-align: top;">
                        <div style="width: 100%;padding-left: 1%;height: 40px;">下班打卡</div>
                        <div id="morning_work_end" style="width: 100%;padding-left: 1%;height: 255px;">

                        </div>
                    </div>
                    <div style="width: 24%;height: 300px;background: white;padding-top: 1%;padding-left: 1%;border-radius: 3px;padding-right: 1%;display: inline-block;vertical-align: top;">
                        <div style="width: 100%;padding-left: 1%;height: 40px;">上班打卡</div>
                        <div id="afternoonwork_start" style="width: 100%;padding-left: 1%;height: 255px;">

                        </div>
                    </div>
                    <div style="width: 24%;height: 300px;background: white;padding-top: 1%;padding-left: 1%;border-radius: 3px;padding-right: 1%;display: inline-block;vertical-align: top;">
                        <div style="width: 100%;padding-left: 1%;height: 40px;">下班打卡</div>
                        <div id="afternoonwork_end" style="width: 100%;padding-left: 1%;height: 255px;">

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="view_in_details" class="shade">
            <div id="view-model" style="width: 700px;background: white;left: 50%;top: 50%;position: absolute;transform: translate(-50%, -50%);">
                <div id="view-title" style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;font-size: 14px;cursor: move;">
                    <div style="width: 40%;height: 40px;line-height: 40px;text-align: left;padding-left: 1%;letter-spacing: 2px;float: left;">
                        打卡详情
                    </div>
                    <div style="width: 59%;height: 40px;letter-spacing: 2px;float: left;">
                        <div onclick="view_close_models()" style="width: 40px;height: 40px;text-align: center;line-height: 40px;cursor: pointer;float: right;">
                            <i class="iconfont icon-quchu"></i>
                        </div>
                    </div>
                </div>

                <div style="width: 100%;font-size: 14px;background: #E8E8E8;">
                    <div style="width: 100%;height: 300px;background: white;">
                        <div style="width: 100%;height: 35px;">
                            <table style="width: 100%;">
                                <td style="width: 20%;height: 35px;border: #cfcfcf solid 1px;text-align: center;">姓名</td>
                                <td style="width: 25%;height: 35px;border: #cfcfcf solid 1px;text-align: center;">工号</td>
                                <td style="width: 25%;height: 35px;border: #cfcfcf solid 1px;text-align: center;">日期</td>
                                <td style="width: 30%;height: 35px;border: #cfcfcf solid 1px;text-align: center;">打卡时间</td>
                            </table>
                        </div>
                        <div id="this_div" style="width: 100%;height: 260px;overflow: auto;">
                            <table id="this_detail" style="width: 100%;">

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/administrative/js/layer.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("attendance").className = "add-nav-active";
            document.getElementById("check_in_statistics").className = "add_class";
            const currentDate = new Date();
            const currentMonth = currentDate.getMonth() + 1;            // 当前月
            const currentYear = currentDate.getFullYear();            // 当前年
            const currentDay = currentDate.getDate();            // 当前日
            CreateCalendar(currentYear, currentMonth, currentDay);
        };

        function switch_content(current_id) {
            var head_flag = '{{ head_flag | safe }}';
            if (current_id === 'MyStatistics') {
                document.getElementById("MyStatistics").className = "top_navigation top_navigation_active";
                document.getElementById("MyStatisticsModel").style.display = "inline-block";
                document.getElementById("TeamStatistics").className = "top_navigation";
                document.getElementById("TeamStatisticsModel").style.display = "none";
            }else {
                if (head_flag === 'false') {
                    alert("对不起，暂无权限查看部门考勤！")
                    return false
                }
                document.getElementById("TeamStatistics").className = "top_navigation top_navigation_active";
                document.getElementById("TeamStatisticsModel").style.display = "inline-block";
                document.getElementById("MyStatistics").className = "top_navigation";
                document.getElementById("MyStatisticsModel").style.display = "none";
            }
        }
        
        // 创建日历
        function CreateCalendar(currentYear, currentMonth, currentDay) {
            var form = new FormData();
            form.append("year", currentYear);
            form.append("month", currentMonth);
            form.append("day", currentDay);
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/personnel/CheckInStatistics.html");
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        for (var i=0; i<JsonDate["data"].length; i++) {
                            var div_tag = `<div style="width: 100%;height: 14%;margin-top: 5px;">`
                            for (var j=0; j<JsonDate["data"][i].length; j++) {
                                console.log(JsonDate["data"][i][j])
                                if (JsonDate["data"][i][j]['trave_flag'] === 'true') {
                                    var currt_color = "#0db5c8;"
                                }else {
                                    currt_color = "#54FF9F;"
                                }
                                if (JsonDate["data"][i][j]['current_before'] === 'true') {
                                    if (JsonDate["data"][i][j]['status'] === 0) {
                                        var first_div = `<div onclick="check_online(this)" data-value="`+JsonDate["data"][i][j]['year']+`-`+JsonDate["data"][i][j]['month']+`-`+JsonDate["data"][i][j]['day']+`" style="width: 13%;height: 90%;margin-top: 5px;text-align: center;line-height: 50px;display: inline-block;vertical-align: top;border: #F5F5F5 solid 1px;color: #cfcfcf;margin-left: 5px;cursor: pointer;position: relative;"><div class="dot" style="background: `+currt_color+`"></div>`+JsonDate["data"][i][j]['day']+`</div>`
                                    }else {
                                        if (parseInt(JsonDate["data"][i][j]['month']) === currentMonth && parseInt(JsonDate["data"][i][j]['day']) === currentDay) {
                                            first_div = `<div onclick="check_online(this)" data-value="`+JsonDate["data"][i][j]['year']+`-`+JsonDate["data"][i][j]['month']+`-`+JsonDate["data"][i][j]['day']+`" style="width: 13%;height: 90%;margin-top: 5px;text-align: center;line-height: 50px;display: inline-block;vertical-align: top;border: #3A5FCD solid 1px;color: #3A5FCD;margin-left: 5px;cursor: pointer;position: relative;"><div class="dot" style="background: `+currt_color+`"></div>`+JsonDate["data"][i][j]['day']+`</div>`
                                        }else {
                                            first_div = `<div onclick="check_online(this)" data-value="`+JsonDate["data"][i][j]['year']+`-`+JsonDate["data"][i][j]['month']+`-`+JsonDate["data"][i][j]['day']+`" style="width: 13%;height: 90%;margin-top: 5px;text-align: center;line-height: 50px;display: inline-block;vertical-align: top;border: #CCCCCC solid 1px;margin-left: 5px;cursor: pointer;position: relative;"><div class="dot" style="background: `+currt_color+`"></div>`+JsonDate["data"][i][j]['day']+`</div>`
                                        }
                                    }
                                }else {
                                    if (JsonDate["data"][i][j]['status'] === 0) {
                                        first_div = `<div data-value="`+JsonDate["data"][i][j]['year']+`-`+JsonDate["data"][i][j]['month']+`-`+JsonDate["data"][i][j]['day']+`" style="width: 13%;height: 90%;margin-top: 5px;text-align: center;line-height: 50px;display: inline-block;vertical-align: top;border: #F5F5F5 solid 1px;color: #cfcfcf;margin-left: 5px;cursor: pointer;position: relative;">`+JsonDate["data"][i][j]['day']+`</div>`
                                    }else {
                                        if (parseInt(JsonDate["data"][i][j]['month']) === currentMonth && parseInt(JsonDate["data"][i][j]['day']) === currentDay) {
                                            first_div = `<div data-value="`+JsonDate["data"][i][j]['year']+`-`+JsonDate["data"][i][j]['month']+`-`+JsonDate["data"][i][j]['day']+`" style="width: 13%;height: 90%;margin-top: 5px;text-align: center;line-height: 50px;display: inline-block;vertical-align: top;border: #3A5FCD solid 1px;color: #3A5FCD;margin-left: 5px;cursor: pointer;position: relative;">`+JsonDate["data"][i][j]['day']+`</div>`
                                        }else {
                                            first_div = `<div data-value="`+JsonDate["data"][i][j]['year']+`-`+JsonDate["data"][i][j]['month']+`-`+JsonDate["data"][i][j]['day']+`" style="width: 13%;height: 90%;margin-top: 5px;text-align: center;line-height: 50px;display: inline-block;vertical-align: top;border: #CCCCCC solid 1px;margin-left: 5px;cursor: pointer;position: relative;">`+JsonDate["data"][i][j]['day']+`</div>`
                                        }
                                    }
                                }

                                div_tag += first_div
                            }
                            div_tag = div_tag + "</div>"
                            $("#CalendarDetails").append(div_tag)
                        }
                    }
                }
            };
        }

        function check_in_detail(data_value_this) {
            var form = new FormData();
            form.append("check_in_data", data_value_this);
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/personnel/CheckInDetail");
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        document.getElementById("morning_work_start").innerHTML = '';
                        document.getElementById("morning_work_end").innerHTML = '';
                        document.getElementById("afternoonwork_start").innerHTML = '';
                        document.getElementById("afternoonwork_end").innerHTML = '';
                        if (JsonDate["morning_check_obj"].length > 0) {
                            for (var i=0; i<JsonDate["morning_check_obj"].length; i++) {
                                var morning_work_div = `<div style="width: 100%;line-height: 40px;padding-left: 3%;">`+JsonDate["morning_check_obj"][i]+`</div>`
                                $("#morning_work_start").append(morning_work_div)
                            }
                        }else {
                            morning_work_div = `<div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;"><strong>未打卡</strong></div>`
                            $("#morning_work_start").append(morning_work_div)
                        }

                        if (JsonDate["morning_off_work_obj"].length > 0) {
                            for (var j=0; j<JsonDate["morning_off_work_obj"].length; j++) {
                                var morning_work_end_div = `<div style="width: 100%;line-height: 40px;padding-left: 3%;">`+JsonDate["morning_off_work_obj"][j]+`</div>`
                                $("#morning_work_end").append(morning_work_end_div)
                            }
                        }else {
                            morning_work_end_div = `<div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;"><strong>未打卡</strong></div>`
                            $("#morning_work_end").append(morning_work_end_div)
                        }

                        if (JsonDate["afternoon_work_end_obj"].length > 0) {
                            for (var h=0; h<JsonDate["afternoon_work_end_obj"].length; h++) {
                                var afternoonwork_start_div = `<div style="width: 100%;line-height: 40px;padding-left: 3%;">`+JsonDate["afternoon_work_end_obj"][h]+`</div>`
                                $("#afternoonwork_start").append(afternoonwork_start_div)
                            }
                        }else {
                            afternoonwork_start_div = `<div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;"><strong>未打卡</strong></div>`
                            $("#afternoonwork_start").append(afternoonwork_start_div)
                        }

                        if (JsonDate["evening_work_end_obj"].length > 0) {
                            for (var k=0; k<JsonDate["evening_work_end_obj"].length; k++) {
                                var afternoonwork_end_div = `<div style="width: 100%;line-height: 40px;padding-left: 3%;">`+JsonDate["evening_work_end_obj"][k]+`</div>`
                                $("#afternoonwork_end").append(afternoonwork_end_div)
                            }
                        }else {
                            afternoonwork_end_div = `<div style="width: 100%;text-align: center;line-height: 100px;font-size: 22px;"><strong>未打卡</strong></div>`
                            $("#afternoonwork_end").append(afternoonwork_end_div)
                        }
                    }
                }
            };
        }

        function check_online(this_ele) {
            var data_value_this = this_ele.getAttribute("data-value");
            check_in_detail(data_value_this);
            document.getElementById("check_in_details").style.display = "table-row";
        }

        function check_close_models() {
            document.getElementById("check_in_details").style.display = "none";
        }

        let check_title = document.querySelector("#check-title");
        let check_model = document.querySelector("#check-model");

        check_title.addEventListener("mousedown", function (e) {
            let x = e.pageX - check_model.offsetLeft;
            let y = e.pageY - check_model.offsetTop;
            document.addEventListener("mousemove", move);

            function move(e) {
                check_model.style.left = e.pageX - x + 'px';
                check_model.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        const gridManagerName = "test",
            TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
            arg = {
                gridManagerName: "test",
                width: "100%",
                height: "100%",
                autoOrderConfig: {fixed: "left"},
                checkboxConfig: {key: "id", fixed: "left"},
                supportAjaxPage: !0,
                sortMode: "single",
                supportMenu: !0,
                menuHandler: e => (e.unshift({
                    content: "自定义菜单", line: !0, onClick: e => {
                        alert(e)
                    }
                }), e),
                useCellFocus: !0,
                useHideRow: !0,
                supportMoveRow: !0,
                moveRowConfig: {
                    key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                        console.log(e, t)
                    }
                },
                disableCache: !1,
                ajaxData: function (e, t) {
                    return "/personnel/DepartmentStatistics"
                },
                exportConfig: {
                    fileName: e => {
                        const t = new Date;
                        let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                        for (let t in e) a = `${a}-${t}=${e[t]}`;
                        return a
                    }, suffix: "xls"
                },
                ajaxType: "POST",
                checkedBefore: function (e, t, a) {
                    return console.log("checkedBefore==", e, t, a), a && 90 === a.id && alert("该节点在checkedBefore中配置为不可选"), a && 90 !== a.id
                },
                checkedAfter: function (e, t, a) {
                    console.log("checkedAfter==", e, t, a)
                },
                checkedAllBefore: function (e, t) {
                    console.log("checkedAllBefore==", e, t)
                },
                checkedAllAfter: function (e, t) {
                    console.log("checkedAllAfter==", e, t)

                },
                sortingBefore: function (e) {
                    console.log("sortingBefore", e)
                },
                sortingAfter: function (e) {
                    console.log("sortingAfter", e)
                },
                ajaxBeforeSend: function (e) {
                    console.log("ajaxBeforeSend")
                },
                ajaxSuccess: function (e) {
                    console.log("ajaxSuccess")
                },
                ajaxError: function (e) {
                    console.log("ajaxError")
                },
                ajaxComplete: function (e) {
                    console.log("ajaxComplete")
                },
                adjustBefore: e => {
                    console.log("adjustBefore=>", e)
                },
                adjustAfter: e => {
                    console.log("adjustAfter=>", e)
                },
                responseHandler: e => (e.data.forEach((e => {
                    e.priority = e.id
                })), e),
                rowRenderHandler: (e, t) => e,
                emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
                columnData: [
                    {
                        key: "real_name",
                        text: "姓名",
                        align: "center",
                        disableMoveRow: !0
                    }, {
                        key: "job_number",
                        text: "工号",
                        align: "center",
                    }, {
                        key: "company",
                        text: "科室",
                        align: "center",
                    }, {
                        key: "attendance_days",
                        text: "实际出勤天数",
                        align: "center",
                    },{
                        key: "action",
                        width: "100px",
                        align: "center",
                        fixed: "right",
                        disableMoveRow: !0,
                        disableRowCheck: !0,
                        text: '<span style="color: red">操作</span>',
                        template: (e, t) => `<a class="plugin-action" href="javascript:;" onclick="view_detail(${t.job_number})">查看</a>`
                    }]
            }, demo1 = {
                initSearch: function () {
                }, initFN: () => {

                }, initGM: function () {
                    new window.GridManager(table, arg, (e => {
                        console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                    }))
                }, editRowData: function (e) {
                    window.GridManager.updateRowData("test", "id", {
                        id: window.parseInt(e.getAttribute("data-id")),
                        lastDate: (new Date).getTime()
                    })
                }
            }, table = document.querySelector("#main_table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

        function view_detail(job_number) {
            var form = new FormData();
            form.append("job_number", job_number);
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/personnel/AllCheckInDetail");
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        document.getElementById("view_in_details").style.display = "table-row";
                        for (var i=0; i<JsonDate["data"].length; i++) {
                            var td_atg = `
                                <tr style="width: 100%;">
                                    <td style="width: 20%;height: 35px;border: #cfcfcf solid 1px;text-align: center;">`+JsonDate["data"][i]["real_name"]+`</td>
                                    <td style="width: 25%;height: 35px;border: #cfcfcf solid 1px;text-align: center;">`+JsonDate["data"][i]["job_number"]+`</td>
                                    <td style="width: 25%;height: 35px;border: #cfcfcf solid 1px;text-align: center;">`+JsonDate["data"][i]["check_date"]+`</td>
                                    <td style="width: 30%;height: 35px;border: #cfcfcf solid 1px;text-align: center;">`+JsonDate["data"][i]["check_time"]+`</td>
                                </tr>
                            `
                            $("#this_detail").append(td_atg)
                        }
                    }
                }
            };
        }

        function view_close_models() {
            document.getElementById("view_in_details").style.display = "none";
        }

        let view_title = document.querySelector("#view-title");
        let view_model = document.querySelector("#view-model");

        view_title.addEventListener("mousedown", function (e) {
            let x = e.pageX - view_model.offsetLeft;
            let y = e.pageY - view_model.offsetTop;
            document.addEventListener("mousemove", move);

            function move(e) {
                view_model.style.left = e.pageX - x + 'px';
                view_model.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });
    </script>
{% endblock %}
